<template lang="pug">
.options-ovv(:style="{'width': (putIt ? '100%' : 'auto')}" v-if="getOptionsData && getOptionsData.length")
  .optionsovv-content(v-scroll.x="")
    .options-ovv-close.hand(@click.stop="putIt = !putIt" :style="{'background-color': getBgcolor, 'color': getTextcolor}") {{putIt ? '收起' : '展开'}}
    .optionsovv-item(v-for="(item, index) in getOptionsData" :key="index" v-show="putIt" :style="{'background-color': getBgcolor}")
      .optionsovv-item-top(@click="showDrawer(item)")
        van-icon.optionsovv-item-top-icon(name="arrow-up" :color="getTextcolor")
      .optionsovv-item-bottom(@click="showGroupOption(item)")
        .optionsovv-item-bottom-left
          img.optionsovv-item-bottom-left-cover(:src="item.full_file_url")
        .optionsovv-item-bottom-right
          p(:style="{'color': getTextcolor}") {{item.name}}
          p(:style="{'color': getTextcolor}") {{item.contents && item.contents.replace(/<[^>]+>/g,"")}}
  OptionContents(ref="OptionContents")

</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {
    OptionContents: () => import('Comps/Overview/OptionContents'),
  },
  data() {
    return {
      isClick: {},
      putIt: false, // 收起 展开
    }
  },
  computed: {
    ...mapGetters(['ovvData']),
    // 获取背景颜色
    getBgcolor() {
      if (this.ovvData && this.ovvData.background_color) {
        return this.ovvData.background_color
      }
      return '#FFFFFF'
    },
    // 获取文字颜色
    getTextcolor() {
      if (this.ovvData && this.ovvData.text_font_color) {
        return this.ovvData.text_font_color
      }
      return '#000000'
    },
    // 获取选项卡
    getOptionsData() {
      if (this.ovvData && this.ovvData.overview_menu_items) {

        let optionsArr = this.ovvData.overview_menu_items.options
        if (!optionsArr) {
          // 空数据返回
          return []
        }
        console.log(optionsArr)
        return optionsArr
      } else {
        return []
      }
    },
  },
  watch: {
    ovvData: {
      handler (val) {
        if (val && val.is_open) {
          this.putIt = true
        } else {
          this.putIt = false
        }
      },
      immediate: true
    },
  },
  methods: {
    // 显示选项卡详情
    showDrawer(item) {
      let pointList = []
      if (this.ovvData && this.ovvData.point_list && this.ovvData.point_list.length > 0) {
        pointList = this.ovvData.point_list.filter(mat => mat.material_id == item.id)
      }
      this.$refs.OptionContents.openDialog({item, pointList})
    },
    // 显示隐藏地图上option热点
    showGroupOption(item) {
      // console.log(item)
      if (this.ovvData.point_list && this.ovvData.point_list.length > 0) {
        let filArr = this.ovvData.point_list.filter(point => point.material_id == item.id)
        if (filArr.length <= 0) {
          return this.$vgo.tip('该选项卡未绑定热点')
        }
      }
      setTimeout(() => {
        let itemNodeList = document.querySelectorAll('.ovv-item')
        if (!itemNodeList) return
        let id = item.id
        // console.log(id)
        // console.log(this.isClick)
        if (this.isClick[id]) {
          this.isClick[id] = false
          for (let i in itemNodeList) {
            if (itemNodeList[i].style) {
              itemNodeList[i].style.display = 'block'
            }
          }
          
        } else {
          // console.log(itemNodeList)
          for (let chi in this.isClick) {
            this.isClick[chi] = false
          }
          this.isClick[id] = true
          for (let i in itemNodeList) {
            // console.log(itemNodeList[i])
            // console.log(itemNodeList[i].className)
            if (itemNodeList[i].className && itemNodeList[i].className.indexOf('ovvitem'+id) === -1) {
              // console.log('01222-------------')
              itemNodeList[i].style.display = 'none'
            } else {
              // console.log('013333-------------')
              if (itemNodeList[i].style) {
                itemNodeList[i].style.display = 'block'
              }
            }
          }
        }
      }, 500)
    },
  }
}
</script>

<style lang="stylus" scoped>
.options-ovv
  position absolute !important
  bottom 15px
  left 0
  height 110px
  width 100%
  overflow hidden
  z-index 103
  display flex

  .optionsovv-content
    height 110px
    display flex
    .options-ovv-close
      font-size 15px
      padding 33px 15px
      width 15px
      text-align center
      color #333
      background-color #fff
    .optionsovv-item
      width 315px
      height 110px
      margin-left 10px
      background-color #ffffff
      .optionsovv-item-top
        text-align center
        height 28px
        .optionsovv-item-top-icon
          font-size 24px
      .optionsovv-item-bottom
        cursor pointer
        width 290px
        height 70px
        .optionsovv-item-bottom-left
          width 70px
          height 70px
          display inline-block
          vertical-align top
          margin 0 10px
          img
            width 70px
            height 70px
        .optionsovv-item-bottom-right
          width 195px
          height 70px
          display inline-block
          p:nth-child(1)
            font-size 16px
            margin-bottom 5px
            text-align left
          p:nth-child(2)
            text-align left
            font-size 14px
            min-height 38px
            color #999999
            display -webkit-box
            letter-spacing 0px
            word-break break-all
            -webkit-box-orient vertical
            overflow hidden
            -webkit-line-clamp 2
            text-overflow ellipsis
</style>